<template>
  <div class="kva-container">
    <div class="kva-contentbox">
      <home-page-header>
        <div class="kva-form-search">
          <el-form class="search-form" :inline="true" :model="queryParams" ref="searchForm">
            <el-form-item>
              <el-button type="primary" icon="Plus" @click="handleAdd">添加广告商</el-button>
            </el-form-item>

            <el-form-item label="关键词：" prop="keyword">
              <el-input v-model="queryParams.keyword" placeholder="请输入广告商名称..." maxlength="100" clearable />
            </el-form-item>
            <el-form-item label="启用状态" prop="status">
              <el-select v-model="queryParams.status" style="width: 150px" class="m-2" placeholder="请选择启用状态" clearable>
                <el-option
                  v-for="item in [{value:1,label:'启用中'},{value:0,label:'禁止中'}]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="success" icon="Search"  @click.prevent="handleSearch">搜索</el-button>
              <el-button type="danger" icon="Refresh"  @click.prevent="handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table v-loading="tableLoading" :data="tableData" stripe border height="calc(100vh - 265px)">
          <el-table-column fixed :label="'总数：' + total" width="150" align="center">
            <template v-slot='scope'>
              <span>{{scope.$index+1}}</span>
            </template>
          </el-table-column>
          <el-table-column fixed label="广告商" prop="nickname"   align="center"/>
          <el-table-column fixed label="联系电话" prop="telephone"  align="center"/>
          <el-table-column fixed label="充值金额" prop="price"  align="center"/>
          <el-table-column label="是否启用" width="200" align="center" v-if="queryParams.deleted === 0">
            <template #default="scope">
              <el-switch v-model="scope.row.status" 
               @change="handleStatus(scope.row)"
               :active-value="1"
               active-text="启用中"
               inactive-text="已禁止"
               :inactive-value="0">
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" align="center" width="240">
            <template #default="scope">
              <el-button icon="edit" type="info" size="small" @click.stop="handleCopy(scope.row)">复制</el-button>
              <el-button icon="edit" type="primary" v-if="queryParams.deleted === 0" size="small" @click.stop="handleEdit(scope.row)">编辑</el-button>
              <el-button v-if="scope.row.isDeleted==0" icon="remove" type="danger" @click.stop="handleDel(scope.row)">删除</el-button>
              <el-button v-if="scope.row.isDeleted==1" icon="remove" type="danger" @click.stop="handleDeleted(scope.row,'is_deleted')">恢复删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="kva-pagination-box center">
          <el-pagination :current-page="queryParams.pageNo" :page-size="queryParams.pageSize"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </home-page-header>
    </div>
    <add-advert-ment ref="addRef" @load="handleSearch"></add-advert-ment>
  </div>
</template>

<script  setup>
import KVA from '@/utils/kva.js'
import {
  copyData,
  findPages,
  delById,
  updateStatus
} from '@/api/advert/advertment.js'
import AddAdvertMent from "./components/AddAdvertMent.vue";
// 搜索属性定义
const queryParams = reactive({
  pageNo: 1,
  pageSize: 30,
  status:"",
  keyword: "",
  deleted:0
})
// 定义响应式得列表数据容器
const tableData = ref([])
const tableLoading = ref(false)
const pages = ref(0)
const total = ref(0)
const searchForm = ref({})
// 编辑添加相关
const addRef = ref({})

// 加载数据
const handleLodeData = async () => {
  tableLoading.value = true
  const resp = await findPages(queryParams)
  tableLoading.value = false
  tableData.value = resp.data.records
  total.value = resp.data.total * 1
  pages.value = resp.data.pages * 1
}
const handleDeleted = async (row,field) => {
  try{
    const res= await updateStatus(row.id,field,0)
    handleLodeData()
    if(res.code==20000){
      KVA.notifySuccess("操作成功!")
    }
  }catch (e){
  }
}
// 搜索
const handleSearch = () => {
  queryParams.pageNo = 1
  handleLodeData()
}

// 重置
const handleReset = () => {
  searchForm.value.resetFields()
  handleSearch()
}

const handleCopy = async (row)=>{
  await copyData(row.id);
  KVA.success("复制成功!!")
  handleLodeData()
}
// 分页size更改
const handleSizeChange = (size) => {
  queryParams.pageSize = size
  handleLodeData()
}

// 分页pageNo更改
const handleCurrentChange = (pno) => {
  queryParams.pageNo = pno
  handleLodeData()
}


// 添加事件
const handleAdd = () => {
  addRef.value.handleOpen()
}

// 编辑
const handleEdit = (row) => {
  addRef.value.handleOpen(row.id)
}

// 删除
const handleDel =  (row) => {
  KVA.confirm("警告", "<strong>您确定要执行此次操作吗？</strong>", { icon: "success" }).then(async() => {
    const opid = row.id
    await delById(opid)
    KVA.notifySuccess("删除成功!")
    handleLodeData()
  })
}

// 更新状态
const handleStatus = async (row) => {
  await updateStatus(row.id,"status",row.status)
  KVA.notifySuccess("更新成功!")
}

onMounted(() => {
  handleLodeData()
})


</script>


